import { DragDropContextProvider, Droppable } from '@/plugins/dnd'
import { FC, useEffect, useState } from 'react'
import shallow from 'zustand/shallow'
import { BoxSetting } from '../BoxItem'
// import { chnInfoEntity } from '../interface'
// import { useTvWallStore } from '../store'
// import { handleGetEeeorCodeText, isEqualMtchnids } from '../translator'
import { AddIcon, StyledNormalWrap, Wrap } from './style'
import { useMeetingTVWallStore } from '../store'
import { useMeetingParamsStore } from '../../meetingParams/store'
import { boxPositionsEntity } from '../interface'
import { UserEntity } from '@/api/create/interface'
interface ContentProps {
	/**盒子位置在离线状态*/
	boxInfo: boxPositionsEntity
	/**数组源位置 */
	index: number
	isNeedUpdate: boolean
}
interface DropData<T = UserEntity, K = { [key: string]: any }> {
	data?: {
		mt?: T
	} & K
	from?: string
	index?: number
}
export const Content: FC<ContentProps> = ({ boxInfo, index }) => {
	const { update, mode, style_map, correct_style, config, convertMsg, operate_correct_style_info, isNeedUpdate } =
		useMeetingTVWallStore(
			(state) => ({
				update: state.update,
				mode: state.mode,
				config: state.config,
				style_map: state.style_map,
				correct_style: state.correct_style,
				convertMsg: state.convertMsg,
				operate_correct_style_info: state.operate_correct_style_info,
				isNeedUpdate: state.isNeedUpdate,
			}),
			shallow
		)

	let _source = useMeetingTVWallStore((state) => state.operate_correct_style_info[correct_style])
	let member = _source?.members?.find((v) => v.hdu_id === boxInfo.hdu_id) ?? null
	const meetingType = useMeetingParamsStore((state) => state.meetingType) /**会议类型 */
	let _rate = config.MCCcontainerW / config.containerW /**盒子缩放码率 */
	let _style_position = style_map[correct_style].positions /**当前电视墙风格位置信息 */
	const { box_x, box_y, box_width, box_height } = _style_position[index] /**盒子位置信息*/
	const _left = box_x * _rate /**左偏移位置*/
	const _right = box_y * _rate /**右偏移位置*/
	const _width = box_width * _rate /**宽度 */
	const _height = box_height * _rate /**高度*/
	const [is_show_setting, setIsShowSetting] = useState(false) /**是否展示设置 */
	const [active, setActive] = useState(false) /**是否展示设置 */

	/**展示名称 */
	const boxMTShowByData = () => {
		let result: any = convertMsg(member) // 通过covertMSg处理数据
		if (!result) return
		if (result.type !== 0 && !(result.type === 9 && meetingType === 1)) {
			return (
				<>
					<div className="name-ellipsis">{result.name}</div>
					{result.mtName && <div className="name-ellipsis">{result.mtName}</div>}
				</>
			)
		} else {
			return <AddIcon></AddIcon>
		}
	}
	/**设置终端跟随 */
	const handleSetMemberType = async (mcc: UserEntity | null) => {
		let source = {}
		/**找到当前通道对应的盒子*/
		let member = operate_correct_style_info[correct_style]?.members || []
		/**判断当前通道是否已有缓存*/
		let flag = member?.some((item) => {
			return item.hdu_id === boxInfo.hdu_id
		})
		if (flag) {
			/**已存在缓存*/
			for (let i = 0; i < member.length; i++) {
				if (member[i].hdu_id === boxInfo.hdu_id) {
					member[i] = {
						member_type: 1,
						hdu_alias: boxInfo.hdu_alias,
						hdu_id: boxInfo.hdu_id,
						account: mcc?.account,
						account_type: mcc?.account_type ?? 1,
						name: mcc?.name,
						conf_e164: mcc?.conf_e164 || mcc?.parent_id || '',
					}
				}
			}
		} else {
			/**不能找到新增*/
			member?.push({
				member_type: 1,
				hdu_alias: boxInfo.hdu_alias,
				hdu_id: boxInfo.hdu_id,
				account: mcc?.account,
				account_type: mcc?.account_type ?? 1,
				name: mcc?.name,
				conf_e164: mcc?.conf_e164 || mcc?.parent_id || '',
			})
		}
		source = Object.assign({}, operate_correct_style_info[correct_style], { members: member })
		operate_correct_style_info[correct_style] = source
		update({
			isNeedUpdate: !isNeedUpdate,
			operate_correct_style_info: operate_correct_style_info,
			correct_style_operate_box_info: boxInfo.hdu_id,
		})
	}
	const handleDrop = (sourceData: DropData) => {
		if (sourceData) {
			handleSetMemberType(sourceData?.data?.mt ?? null)
		}
	}
	return (
		<Wrap className={`tvwall-list-item ${active ? 'active' : ''}`}>
			<DragDropContextProvider>
				<Droppable
					onDrop={(dataTransfer) => {
						handleDrop(dataTransfer)
					}}
				>
					{(setDroppableRef) => (
						<StyledNormalWrap
							left={_left}
							top={_right}
							width={_width}
							height={_height}
							mode={mode}
							disabled={false}
							ref={setDroppableRef}
							onMouseEnter={() => {
								setIsShowSetting(true)
							}}
							onMouseLeave={() => {
								setIsShowSetting(false)
							}}
						>
							<div className="re-box-content">{boxMTShowByData()}</div>
							{/**错误码*/}
							{/* {boxDetailVOsSourceErrorCode && boxInfo.hdu_id && boxDetailVOsSourceErrorCode[boxInfo.hdu_id] && (
							<div className="errorMark" onClick={handleShowErrorMark}>
								{err_text_show && (
									<div className="tv-box-net-error">
										{err_text}
										<div
											className="error-img"
											onClick={(e) => {
												e.stopPropagation()
												handleRemoveErrorMark()
											}}
										></div>
									</div>
								)}
							</div>
						)} */}
							{/**设置*/}
							{mode !== 2 && (
								<BoxSetting
									boxInfo={boxInfo}
									index={index}
									is_show_setting={is_show_setting}
									member={member}
									handleSetActive={(flag: boolean) => {
										setActive(flag)
									}}
								></BoxSetting>
							)}
						</StyledNormalWrap>
					)}
				</Droppable>
			</DragDropContextProvider>
		</Wrap>
	)
}
